import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

import ChatRoom from './ChatRoom'


export default function ChatList(props) {

  const roomData = [
    {
      "roomId": "world",
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    }
  ]

  const MockRoomData = [
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    },
    {
      "username": Math.random().toString(16).slice(-4),
      "avatar": "https://picsum.photos/400/400/?blur=4&username=",
    }
  ]
  
  const RoomList =  roomData.map((chatItem) =>
                
      <div  className="flex flex-row justify-start items-center w-full h-20 my-2 border-b-2 border-gray-200" key={chatItem.roomId}>
        
        <div className="w-14 h-14 ml-2">
          <Link to={"/" + chatItem.roomId}>
            <img className="block w-10 h-10 mx-auto my-auto rounded-full" src={chatItem.avatar + chatItem.roomId} alt="user avatar" />
          </Link>
        </div>

        <div className="flex-grow mx-2 h-16 flex flex-col flex-wrap justify-start">
          <div className="h-1/2">
            <div className="flex flex-row justify-between items-start">
              <p className="block text-xl">{chatItem.roomId}</p>
              <p className="block text-xs">2021/04/17</p>
            </div>
                        
          </div>

          <div className="h-1/2">
            <p className="block ">world</p>
          </div>
        </div>
        
      </div>
    
    )

  return (
    <Router basename="/chat/chat_list">
        
      <div className="w-full h-full flex flex-row">
        <div className="flex flex-col w-80 h-full overflow-y-scroll bg-gray-100 border-r-4 border-indigo-100">

        {
          RoomList
        }
          
        </div>

        <div className="w-full h-full">

          <Switch>

            <Route path="/:roomId" component={ChatRoom} />

          </Switch>

        </div>

      </div>
        
    </Router>

  )
    
}
